<template>
  <el-row justify="space-between">
    <company-selector width="w-100" v-model="selectCompanyId"/>
    <el-button v-if="checkPermission(Permissions.device, Action.add)" type="primary"
               @click="showAddDeviceDialog = true">添加设备
    </el-button>
  </el-row>
  <el-divider/>
  <el-table :data="devices" stripe border>
    <el-table-column label="设备名称" prop="company_device_name"></el-table-column>
    <el-table-column label="设备型号" prop="company_device_xh"></el-table-column>
    <el-table-column label="校准到期时间" prop="company_device_time">
      <template #default="{row}">
        <span :class="{'text-red':checkDateExpire(row.company_device_time)}">{{ row.company_device_time }}</span>
      </template>
    </el-table-column>
    <el-table-column label="标定证书" prop="company_device_device_img">
      <template #default="{row}">
        <download-file-button v-model="row.company_device_device_img" :file-name="row.company_device_xh+'标定证书'">
          点击下载标定证书
        </download-file-button>
      </template>
    </el-table-column>
    <el-table-column label="设备购买发票" prop="company_device_device_fp">
      <template #default="{row}">
        <photo-provider v-if="row.company_device_device_fp !== null">
          <photo-consumer :src="getImageUrl(row.company_device_device_fp)" :key="row.company_device_id">
            <img :src="getImageUrl(row.company_device_device_fp)" alt="设备购买发票" class="size-20"/>
          </photo-consumer>
        </photo-provider>
        <span v-else class="text-gray">发票图片未上传</span>
      </template>
    </el-table-column>
    <el-table-column label="设备外观图" prop="company_device_img">
      <template #default="{row}">
        <photo-provider v-if="row.company_device_img !== null">
          <photo-consumer :src="getImageUrl(row.company_device_img)" :key="row.company_device_id">
            <img :src="getImageUrl(row.company_device_img)" alt="设备外观图" class="size-20"/>
          </photo-consumer>
        </photo-provider>
        <span v-else class="text-gray">设备图片未上传</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-popconfirm title="谨慎操作，删除后该设备信息不可找回，确认删除嘛?"
                       @confirm="deleteDeviceFn(row)"
                       v-if="checkPermission(Permissions.device, Action.delete)">
          <template #reference>
            <el-button type="danger"
                       size="small"
                       :loading="mutation.isLoading && needDeleteDeviceId === row.company_device_id"
                       :disabled="!mutation.isLoading && needDeleteDeviceId !== row.company_device_id">删除
            </el-button>
          </template>
        </el-popconfirm>
        <el-button v-if="checkPermission(Permissions.device, Action.edit)" size="small" type="success"
                   @click="updateDevice(row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <add-device-dialog v-model="showAddDeviceDialog" @success="refetch"/>
  <update-device-dialog @success="refetch" v-model="showUpdateDeviceDialog"
                        v-model:device="needUpdateDevice"/>
</template>

<script setup lang="ts">
import {type Ref, ref, watchEffect} from "vue";
import {useQuery} from "@pinia/colada";
import {getDevice} from "../../api/device.ts";
import CompanySelector from "../../components/CompanySelector.vue";
import AddDeviceDialog from "./components/AddDeviceDialog.vue";
import {PhotoConsumer, PhotoProvider} from "vue3-photo-preview";
import {useDeleteDevice} from "../../mutations/device.ts";
import {checkDateExpire, getImageUrl} from "../../utils/utils.ts";
import UpdateDeviceDialog from "./components/UpdateDeviceDialog.vue";
import type {DeviceVO} from "../../types";
import {useCloned} from "@vueuse/core";
import DownloadFileButton from "../../components/DownloadFileButton.vue";
import {useUserStore} from "../../store/userStore.ts";
import {Action, Permissions} from "../../types/permissions.ts";


const selectCompanyId = ref()
const showAddDeviceDialog = ref(false)
const showUpdateDeviceDialog = ref(false)
const needUpdateDevice = ref<DeviceVO>();

let {checkPermission} = useUserStore();

let {data: devices, refetch} = useQuery({
  key: () => ["devices", selectCompanyId.value],
  query: () => getDevice(selectCompanyId.value),
  enabled: () => selectCompanyId.value != undefined,
});

let {needDeleteDeviceId, deleteDeviceFn, mutation} = useDeleteDevice();

watchEffect(() => {
  mutation.status.value === 'success' && refetch()
})


const updateDevice = (device: Ref<DeviceVO>) => {
  let {cloned} = useCloned(device);
  needUpdateDevice.value = cloned.value
  showUpdateDeviceDialog.value = true
}
</script>
<style scoped>

</style>